import React from 'react';
import { useSelector } from 'react-redux'
import { Button, Form, Input ,Checkbox} from 'antd';

const FormComponent = ({labels , showModal}) => {

  const languages = useSelector((state) => state.publicReducer.language)
  const onFinish = (values) => {
    console.log('Success:', values);
    showModal()
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <Form
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 8,
      }}
      initialValues={{
        remember: labels.remember,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label={labels.label1}
        name={labels.label1}
        rules={[
          {
            required: true,
            message: 'Please input your '+ labels.label1 + "!",
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label={labels.label2}
        name={labels.label2}
        rules={[
          {
            required: true,
            message: 'Please input your '+ labels.label2 + "!",
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="remember"
        valuePropName="checked"
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Checkbox>{languages === "Korean" ? "주 결제 수단으로 설정" : (languages === "Chinese" ? "设为主要付款方式" : "Set as primary payment method")}</Checkbox>
      </Form.Item>

      <Form.Item
        wrapperCol={{
          offset: 11,
          span: 8,
        }}
      >
        <Button type="primary" htmlType="submit">
          {labels.Submit}
        </Button>
      </Form.Item>
    </Form>
  );
};
export default FormComponent;